<template>
	<view class="feedback-detail">
		<view class="top">
			<view class="title1">
				您的问题
			</view>
			<view class="content">
				{{content?content:''}}
			</view>
			<view class="img-box">
				<view class="img-wp" v-for="(img,index) in imgList" :key="index" @click="previewImage(index)">
					<u-image :src="img" width="213rpx" height="213rpx" mode="aspectFit"></u-image>
				</view>

			</view>
		</view>

		<view class="padding">
		</view>
		<view class="answer" v-if="replyContent">
			<view class="title1">
				客服反馈
			</view>
			<view class="content">
				{{replyContent?replyContent:''}}
			</view>
		</view>
		<view class="submitBtnWp">
			<view class="submitBtn">
				<u-button v-if="status!==0 || status===null" type="primary" text="未解决" @click="changeStatus(0)"
					:plain="true"></u-button>
				<u-button v-if="status===0" type="primary" text="未解决" @click="changeStatus(0)"></u-button>
			</view>
			<view class="submitBtn">
				<u-button v-if="status!==1 || status===null " type="primary" text="已解决" :plain="true"
					@click="changeStatus(1)"></u-button>
				<u-button v-if="status===1" type="primary" text="已解决" @click="changeStatus(1)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	export default {
		components: {

		},
		data() {
			return {
				unStatus: null,
				status: null,
				content: '',
				imgList: [],
				replyContent: '',
				formdata: {}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			}

		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			async getDetail(id) {
				let res = await this.$api.feedbackDetail({
					id
				})
				if (res.success) {
					console.log(res.result);
					let {
						content,
						image,
						status,
						replyContent
					} = res.result
					this.formdata = res.result
					this.content = content
					this.replyContent = replyContent
					this.status = status
					if (!!image) {
						if (image.indexOf(',') === -1) {
							this.imgList.splice(0, 1, image)
						} else {
							this.imgList = image.split(',') || []
						}
					}

				} else {
					uni.showToast({
						title: '查询失败正在返回上一页',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)

				}
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.imgList,
					current: index
				})

			},
			async changeStatus(status) {
				uni.showLoading()
				let payload = Object.assign(this.formdata, {
					status
				})
				let res = await this.$api.editFeedback(payload)
				if (res.success) {
					this.status = status
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				uni.hideLoading()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.feedback-detail {
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f7f8fa;


		.padding {
			height: 24rpx;
			background-color: #f7f8fa;
		}

		.top,
		.answer {
			padding: 0 32rpx 32rpx 32rpx;
			background-color: #fff;

			.title1 {
				height: 96rpx;
				line-height: 96rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #1D2129;
			}

			.content {
				font-size: 28rpx;
				font-weight: 400;
				color: #1D2129;
				line-height: 39rpx;

			}

			.img-box {
				display: flex;
				flex-wrap: wrap;

				.img-wp {
					margin-right: 16rpx;
					margin-top: 16rpx;
				}

			}
		}

		.submitBtnWp {
			position: fixed;
			bottom: 10rpx;
			display: flex;
			justify-content: space-between;
			margin: 30upx;

			.submitBtn {
				width: 300rpx;
				margin: 20upx;
			}
		}

	}
</style>